<template>
  <div>
    <el-card>
      <el-row>
        <el-button
          type="primary"
          :icon="Plus"
          @click="toCreate()"
          v-button="['api:formula:formulavariable:create']"
        >
          新增
        </el-button>
      </el-row>
      <el-row>
        <el-table
          :data="tableList"
          :border="true"
          style="width: 100%"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <el-table-column prop="variableKey" label="变量标识" width="180" />
          <el-table-column prop="variableName" label="变量名" width="180" />
          <el-table-column prop="entityField" label="字段名" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                :icon="EditPen"
                @click="toEdit(scope.row)"
                v-button="['api:formula:formulavariable:update']"
              >
                修改
              </el-button>
              <el-popconfirm title="确定要删除这条数据?" @confirm="toDelete(scope.row)">
                <template #reference>
                  <el-button
                    type="danger"
                    :icon="Delete"
                    v-button="['api:formula:formulavariable:delete']"
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <Pagination
          :total="search.total"
          v-model:pageIndex="search.pageIndex"
          v-model:pageSize="search.pageSize"
          @change="query()"
        ></Pagination>
      </el-row>
    </el-card>

    <!-- 新增和修改弹框 -->
    <el-dialog
      v-model="dialogVisible"
      title="公式变量"
      width="600"
      :draggable="true"
      :close-on-click-modal="false"
    >
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="变量类型" prop="variableType">
              <el-radio-group v-model="form.variableType">
                <el-radio-button v-for="item in formulaVariableTypeList" :value="item.value">
                  {{ item.text }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="order">
              <el-input placeholder="排序" v-model="form.order" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.variableType === FormulaVariableTypeEnum.Variable">
          <el-col :span="12">
            <el-form-item label="数据源" prop="entityType">
              <el-select
                v-model="form.entityType"
                placeholder="请选择"
                @change="variableClassChange"
              >
                <el-option
                  v-for="item in variableClassList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段名" prop="entityField">
              <el-select v-model="form.entityField" placeholder="请选择" @change="variableChange">
                <el-option
                  v-for="item in variableList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="变量标识" prop="variableKey">
              <el-input placeholder="变量标识" v-model="form.variableKey" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="变量名" prop="variableName">
              <el-input placeholder="变量名" v-model="form.variableName" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  Plus,
  Delete,
  EditPen,
  Search,
  Position,
  View,
  CircleCheck,
} from "@element-plus/icons-vue";
import FormulaVariableApi, {
  FormulaVariableEdit,
  FormulaVariableModel,
  FormulaVariableQuery,
  FormulaVariableSelect,
} from "@/api/formula/formulaVariable";
import { EditEnum } from "@/enums/EditEnum";
import successMsg from "@/utils/successMsg";
import EnumApi, { EnumData } from "@/api/enums";
import { FormulaVariableTypeEnum } from "@/enums/FormulaVariableTypeEnum";

const tableList = ref<FormulaVariableModel[]>();

//查询条件
const search = reactive<FormulaVariableQuery>({
  searchString: "",
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

onMounted(async () => {
  await query();
});

const query = async () => {
  const { dataList, totalCount } = await FormulaVariableApi.query(search);
  search.total = totalCount;
  tableList.value = dataList;
};

const form = ref<FormulaVariableEdit>();
const dialogVisible = ref(false);
const editType = ref<EditEnum>();
const variableClassList = ref<FormulaVariableSelect[]>();
const variableList = ref<FormulaVariableSelect[]>();
const formulaVariableTypeList = ref<EnumData[]>([]);
const toEdit = async (row: FormulaVariableEdit) => {
  editType.value = EditEnum.update;
  dialogVisible.value = true;
  form.value = { ...row };

  variableClassList.value = await FormulaVariableApi.queryVariableClass();
  variableList.value = await FormulaVariableApi.queryVariable(form.value.entityType);
  formulaVariableTypeList.value = await EnumApi.QueryFormulaVariableTypeEnums();
};

const toCreate = async () => {
  editType.value = EditEnum.create;
  dialogVisible.value = true;
  form.value = {
    variableType: FormulaVariableTypeEnum.Variable,
  };

  variableClassList.value = await FormulaVariableApi.queryVariableClass();
  formulaVariableTypeList.value = await EnumApi.QueryFormulaVariableTypeEnums();
};

const variableClassChange = async () => {
  variableList.value = await FormulaVariableApi.queryVariable(form.value.entityType);
};

const variableChange = async (value: string) => {
  const option = variableList.value.find((x) => x.value === value);
  if (!form.value.variableKey) {
    form.value.variableKey = option.value;
  }
  if (!form.value.variableName) {
    form.value.variableName = option.text;
  }
};

const save = async () => {
  const { success, message } = await FormulaVariableApi[EditEnum[editType.value]](form.value);
  successMsg(success, message, async () => {
    dialogVisible.value = false;
    await query();
  });
};

const toDelete = async (row: FormulaVariableModel) => {
  const { success, message } = await FormulaVariableApi.delete(row.id);
  successMsg(success, message, await query());
};
</script>
